<template>
  <div class="mark">
    <div class="markcon">
      <p class="markTitle">各病组组收费构成</p>
      <a-icon type="close-square" class="close" @click="markClose"/>
      <span class="download">下载</span>
      <div class="timeClass">
        <a-button-group class="timeChoose">
          <a-button :type="timeNum===1?'primary':''" class="timeButton" @click="timeChange(1)">年</a-button>
          <a-button :type="timeNum===2?'primary':''" class="timeButton" @click="timeChange(2)">月</a-button>
        </a-button-group>
        <a-date-picker :mode="timeTypes[timeNum].mode"
                       class="timePicker"
                       v-model="dateValue"
                       @panelChange="panelChangeHandler"
                       :placeholder="timeTypes[timeNum].selectP"
                       :open="dateOpen"
                       :format="timeTypes[timeNum].format"
                       @openChange="handleOpenChange"/>
      </div>
      <div class="clear"></div>
      <a-table :columns="columns" class="custom"
               :pagination="{total:total,pageSize:pageSize}"
               :data-source="markData" style="margin-top: 10px"
               @change="tableChange"
               :scroll="{ y: '60vh' }">
        <a-tooltip placement="topLeft" slot="diseaseName" slot-scope="text,row">
          <template slot="title">
            <span>{{ text }}</span>
          </template>
          <div class="omit">{{ text }}</div>
        </a-tooltip>
      </a-table>
    </div>
  </div>
</template>

<script>
import Time from '@/components/time.vue'
import moment from 'moment';
import {diseaseFeeList} from "@/api/illnessSurplus";

export default {
  name: "mark.vue",
  props: {
    defaultDate: {
      type: Object,
      default: null
    }
  },
  components: {
    Time
  },
  data() {
    return {
      total: 0,
      pageSize: 11,
      pageNum: 1,
      timeNum: 2,
      timeSelectShow: false,
      dateOpen: false,
      dateValue: moment(),
      timeTypes: {
        1: {name: '年', key: 'year', selectP: "年份选择", mode: "year", format: "YYYY"},
        2: {name: '月', key: 'month', selectP: "月份选择", mode: "month", format: "YYYY-MM"},
      },
      timeParams: {
        year: moment().format('YYYY'),
        month: moment().format('MM')
      },
      moment,
      columns: [
        {title: '病组名称', dataIndex: 'diseaseName', scopedSlots: {customRender: "diseaseName"}},
        {title: '结算金额', dataIndex: 'setmoney',},
        {title: '医疗总费用', dataIndex: 'money',},
        {title: '结余', dataIndex: 'disFee',},
        {title: '病例数', dataIndex: 'disCount',},
        {title: '次均结余', dataIndex: 'disFeeAvg',},
        {title: '平均住院日', dataIndex: 'daysAvg',},
        {title: '次均费用', dataIndex: 'timeFeeAvg',},
        {title: '次均药品费', dataIndex: 'drugFeeAvg',}
      ],
      markData: null,
    }
  },
  created() {
    if (this.defaultDate) {
      this.dateValue = moment(`${this.defaultDate.year}-${this.defaultDate.month}`);
      this.completeParams()
    } else {
      this.getAnalysisData()
    }
  },
  mounted() {

  },
  methods: {
    tableChange(e) {
      this.pageNum = e.current
      this.getAnalysisData()
    },
    markClose() {
      this.$emit('markClose', false)
    },
    async getAnalysisData() {
      const param = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        ...this.timeParams
      }
      const res = await diseaseFeeList(param);
      if (res['data']) {
        this.markData = res.data.list
        this.total = res.data.total
      }
    },
    timeChange: function (e) {
      this.timeNum = e;
      this.timeChangeHandler(this.timeTypes[this.timeNum])
      this.completeParams();
    },
    panelChangeHandler(e) {
      this.dateOpen = false;
      this.dateValue = e;
      this.completeParams();
    },
    handleOpenChange(e) {
      this.dateOpen = e;
    },
    completeParams() {
      const params = {year: '', month: ''};
      params.year = this.dateValue.format("YYYY");
      params.month = this.timeNum === 2 ? this.dateValue.format("MM") : '';
      this.timeChangeHandler(params);
    },
    timeChangeHandler(e) {
      this.timeParams = e;
      this.getAnalysisData()
    },
  }
}
</script>

<style scoped>
.mark {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 10;
  display: block;
}

.markcon {
  border-radius: 5px;
  width: 1200px;
  height: 700px;
  padding: 30px 30px;
  box-sizing: border-box;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  background-color: rgba(255, 255, 255, 1);
}

.markTitle {
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #4B82FB;
  line-height: 14px;
  margin-bottom: 20px
}

.rightTime {
  float: right;
}

.rightTime >>> .ant-input {
  font-size: 12px;
}

.clear {
  display: block;
  content: "";
  clear: both;
}

.close {
  position: absolute;
  right: 30px;
  top: 30px;
  width: 16px;
  height: 16px;
  color: #4B82FB
}

.timeChoose {
  margin-right: 20px;
  font-size: 14px;
  color: #FFFFFF;
}

.ant-btn-group .ant-btn {
}

.ant-btn-group > .ant-btn:first-child:not(:last-child) {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: 0 2px 4px 0 rgba(39, 39, 42, 0.20);
}

.ant-btn-group > .ant-btn:last-child:not(:first-child) {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: 0 2px 4px 0 rgba(39, 39, 42, 0.20);
}

.ant-btn-group .ant-btn-primary:last-child:not(:first-child) {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  background: #6190F7;
  box-shadow: inset 0 2px 4px 0 rgba(60, 106, 194, 0.80);
  border-radius: 0 8px 8px 0;
}

.ant-btn-group .ant-btn-primary:first-child:not(:last-child) {
  background: #6190F7;
}

.download {
  display: inline-block;
  background: #FFFFFF;
  border: 1px solid #D8DCF7;
  border-radius: 8px;
  width: 64px;
  height: 24px;
  text-align: center;
  line-height: 22px;
  font-size: 12px;
  color: #6190F7;
}

.timeButton {
  width: 50px;
}

.timePicker >>> .ant-input {
  box-shadow: 0 2px 4px 0 rgba(39, 39, 42, 0.20);
  border-radius: 8px
}

.timeClass {
  float: right;
  margin-bottom: 10px;
}
</style>
